<template>
  <el-row class="tac">
    <el-col :span="24">
    <el-menu
      :default-active="$route.path"
      class="el-menu-vertical-demo"
      :collapse="mycollapse"
      router
      unique-opened
      @open="handleOpen"
      @close="handleClose"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
        <el-submenu v-for="item in navMenuList" :index="item.indexValue" :key="item.name" >
          <template slot="title">
            <i :class="item.iconCss" ></i>
            <span v-text="item.name"></span>
          </template>
          <el-menu-item-group class="over-hide" v-for="sub in item.childList" :key="sub.name">
            <el-menu-item :index="sub.path" v-text="sub.name">
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>

    </el-col>
  </el-row>
</template>

<script>
  export default {

    data(){
      const navitemlist = [
        {name: '首页',iconCss:"el-icon-menu",indexValue:"1",childList:[
            {path:"/index/home",name:"首页"},
            {path:"/index/dasbord",name:"帐户设置"}
          ]},
        {name: '客户',iconCss:"el-icon-picture",indexValue:"2",childList:[
            {path:"/index/home",name:"客户创建"},
            {path:"/index/dasbord",name:"客户列表"},
            {path:"/index/dasbord",name:"大宗用户列表"},
          ]},
        {name: '整车',iconCss:"icon-cart",indexValue:"3",childList:[
            {path:"/index/home",name:"创建订单"},
            {path:"/index/dasbord",name:"订单列表"}
          ]},
        {name: '金融',iconCss:"el-icon-picture",indexValue:"4",childList:[
            {path:"/index/home",name:"金融登记列表"},
            {path:"/index/dasbord",name:"金融核对列表"}
          ]},
        {name: '保险',iconCss:"el-icon-picture",indexValue:"5",childList:[
            {path:"/index/home",name:"保险登记列表"},
            {path:"/index/dasbord",name:"保险核对列表"}
          ]},
        {name: '延保',iconCss:"el-icon-picture",indexValue:"6",childList:[
            {path:"/index/home",name:"延保登记列表"}
          ]},
        {name: '保障',iconCss:"el-icon-picture",indexValue:"7",childList:[
            {path:"/index/home",name:"保障登记订单"}
          ]},
        {name: '上牌',iconCss:"el-icon-picture",indexValue:"8",childList:[
            {path:"/index/home",name:"上牌登记列表"}
          ]},
        {name: '二手车',iconCss:"el-icon-picture",indexValue:"9",childList:[
            {path:"/index/home",name:"二手车登记列表"}
          ]},
        {name: '收退款',iconCss:"el-icon-picture",indexValue:"10",childList:[
            {path:"/index/home",name:"收退款列表"}
          ]},
        {name: '库存',iconCss:"el-icon-picture",indexValue:"11",childList:[
            {path:"/index/home",name:"整车库存列表"}
          ]},
        {name: '核价',iconCss:"el-icon-picture",indexValue:"12",childList:[
            {path:"/index/home",name:"车型核价列表"}
          ]},
        {name: '金融维护',iconCss:"el-icon-picture",indexValue:"13",childList:[
            {path:"/index/home",name:"金融机构列表"},
            {path:"/index/home",name:"门店金融机构维护"}
          ]},
        {name: '保险维护',iconCss:"el-icon-picture",indexValue:"14",childList:[
            {path:"/index/home",name:"保险机构列表"},
            {path:"/index/home",name:"门店保险机构维护"}
          ]},
        {name: '折扣',iconCss:"el-icon-picture",indexValue:"15",childList:[
            {path:"/index/home",name:"第三方渠道折扣列表"}
          ]},
        {name: '报表',iconCss:"el-icon-picture",indexValue:"16",childList:[
            {path:"/index/home",name:"开票统计报表"}
          ]},
        {name: '员工',iconCss:"el-icon-picture",indexValue:"17",childList:[
            {path:"/index/home",name:"员工列表"}
          ]},
        {name: '角色',iconCss:"el-icon-picture",indexValue:"18",childList:[
            {path:"/index/home",name:"角色列表"}
          ]},
        {name: '日志',iconCss:"el-icon-picture",indexValue:"19",childList:[
            {path:"/index/home",name:"日志列表"},
            {path:"/index/home",name:"日志历史列表"},
          ]},
        {name: '接口',iconCss:"el-icon-picture",indexValue:"20",childList:[
            {path:"/index/home",name:"接口列表"}
          ]},
      ];
      return {
        navMenuList:navitemlist
      }
    },
    props:{
      mycollapse:Boolean,
      required: true
    },
    methods: {
      handleOpen(key, keyPath) {
      //  console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
    //    console.log(key, keyPath);
      }
    }

  };
</script>

<style scoped>




</style>
